<template>
  <view class="history-list">
    <view v-if="!history || history.length === 0" class="empty">暂无浏览记录</view>
    <view
      class="product-item"
      v-for="item in history"
      :key="item.id"
      @click="goDetail(item)"
    >
      <image class="product-image" :src="item.img_url || item.image || '/static/logo.png'" mode="aspectFill"></image>
      <view class="product-info">
        <text class="product-name">{{ item.title || item.name }}</text>
        <text class="product-desc">{{ item.zhaiyao || '' }}</text>
        <view class="product-bottom">
          <text class="product-price">¥{{ item.sell_price || item.price }}</text>
          <text class="product-market" style="text-decoration:line-through;color:#bbb;font-size:12px;margin-left:8rpx;">
            ¥{{ item.market_price || '' }}
          </text>
          <wd-icon name="cart" size="20px" color="#F56C6C"></wd-icon>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import { request, BASE_URL } from '@/Requset/request'

// 浏览历史数据
const history = ref<any[]>([])

// 页面展示时加载本地历史
onShow(() => {
  const his = uni.getStorageSync('history') || []
  history.value = Array.isArray(his) ? his : []
  console.log('读取历史', history.value)
})

// 跳转到商品详情页
function goDetail(item) {
  // 可选：如需获取最新详情，可用 request({ url: BASE_URL + 'api/getgoodsinfo/' + item.id })
  uni.navigateTo({
    url: `/pages/detail/detail?id=${item.id}`
  })
}
</script>

<style scoped>
.history-list {
  padding: 24rpx;
}
.product-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 20rpx;
  background: #fff;
  border-radius: 8rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
  padding: 16rpx;
  cursor: pointer;
}
.product-image {
  width: 100rpx;

  height: 100rpx;
  border-radius: 8rpx;
  background: #f5f5f5;
  margin-right: 16rpx;
  object-fit: cover;
}
.product-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.product-name {
  font-size: 30rpx;
  color: #333;
  font-weight: bold;
  margin-bottom: 8rpx;
  display: block;
}
.product-desc {
  color: #888;
  font-size: 24rpx;
  margin-bottom: 8rpx;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  word-break: break-all;
}
.product-bottom {
  display: flex;
  align-items: center;
}
.product-price {
  color: #f56c6c;
  font-size: 28rpx;
}
.product-market {
  color: #bbb;
  font-size: 24rpx;
  margin-left: 8rpx;
  text-decoration: line-through;
}
.empty {
  text-align: center;
  color: #999;
  margin-top: 80rpx;
  font-size: 28rpx;
}
</style>